const path = require('path');
const webpack = require('webpack');

const config = require('./config');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const SpeedMeasureWebpackPlugin = require('speed-measure-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const getClientEnvironment = require('./env');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const smw = new SpeedMeasureWebpackPlugin();
const APP_PATH = path.resolve(__dirname, '../src');
const env = getClientEnvironment(config.publicPath);


module.exports = smw.wrap( {
    context: path.resolve(__dirname, "../"),
    stats: 'errors-only',
    entry: {
        index: './src/index.tsx'
    },
    output: {
        filename: 'js/[name].bundle.js',
        path: config.assetsRoot,
        publicPath: config.publicPath
    },
    module: {
        rules: [
            // 把这个配置放在所有loader之前
            {
                enforce: 'pre',
                test: /\.tsx?$/,
                exclude: /node_modules/,
                include: [APP_PATH],
                loader: 'eslint-loader',
                options: {
                    emitWarning: true, // 这个配置需要打开，才能在控制台输出warning信息
                    emitError: true, // 这个配置需要打开，才能在控制台输出error信息
                    fix: true // 是否自动修复，如果是，每次保存时会自动修复可以修复的部分
                }
            },
            {
                test: /\.(html)$/,
                loader: 'html-loader'
            },
            {
                test: /\.(j|t)sx?$/,
                include: APP_PATH,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [["@babel/preset-env", {
                                targets: {
                                    edge: "17",
                                    firefox: "60",
                                    chrome: "67",
                                    safari: "11.1",
                                    ie: "11"
                                },
                                useBuiltIns: 'usage',
                                corejs: 2
                            }]],
                            plugins: [
                                '@babel/plugin-syntax-dynamic-import',
                                "@babel/plugin-proposal-object-rest-spread",
                                ['@babel/plugin-proposal-class-properties', { 'loose': true }] // class中的箭头函数中的this指向组件
                            ],
                            cacheDirectory: true
                        }
                    }
                ]
            },
            {
                test: /\.(less|css)$/,
                use: [
                    { loader: 'style-loader' },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false
                        }
                    },
                    'postcss-loader',
                    {
                        loader: 'less-loader',
                        options: {
                            lessOptions: {
                                javascriptEnabled: true
                            }
                        }
                    }
                ]
            },
            {
                test: /\.svg$/,
                use: ['@svgr/webpack']
            },
            {
                test: /\.(jpg|jpeg|bmp|png|webp|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 6 * 1024,
                    name: 'static/media/[name].[hash:8].[ext]',
                }
            },
            {
                exclude: [/\.(js|mjs|ts|tsx|less|css|jsx)$/, /\.html$/, /\.json$/],
                loader: 'file-loader',
                options: {
                    name: 'static/media/[path][name].[hash:8].[ext]',
                }
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                loader: 'image-webpack-loader',
                enforce: "pre"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: config.indexPath,
            inject: true,
            showErrors: true
        }),
        new HtmlWebpackPlugin({
            template: config.enIndexPath,
            filename: 'en/index.html',
            inject: true,
            showErrors: true
        }),
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: [path.resolve('dist')],
        }),

        // 在js代码中能够使用环境变量(demo: process.env.NODE_ENV === 'production')
        new webpack.DefinePlugin(env.stringified),
        // 忽略moment的国际化库
        // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        new BundleAnalyzerPlugin({
            analyzerMode: 'static',
            openAnalyzer: false,
            reportFilename: path.join(config.assetsRoot, './report.html')
        }),
        // new CopyWebpackPlugin([
        //     {
        //         from: 'public',
        //         ignore: ['index.html']
        //     }
        // ]),
    ],
    resolve: {
        extensions: ['.tsx', '.ts', '.js', '.jsx'],
        alias: {
            '@': path.resolve(__dirname, '../src/')
        }
    }
});
